<template>
    <div class="checkArea">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">区域</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
                <div class="search">
                    <label>
                        <input type="text"
                               placeholder="区域名称"
                               v-model="searchParam">
                    </label>
                    <i class="icon" @click="search"></i>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="areaPro.all" :show="areaPro.show" :color="areaPro.color"></pCircle>
                    <p class="title tc">区域总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="placePro.all" :show="placePro.show" :color="placePro.color"></pCircle>
                    <p class="title tc">已布置区域</p>
                </li>
                <li class="fl">
                    <pCircle :all="needReaderPro.all" :show="needReaderPro.show" :color="needReaderPro.color"></pCircle>
                    <p class="title tc">所需阅读器数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="ownReaderPro.all" :show="ownReaderPro.show" :color="ownReaderPro.color"></pCircle>
                    <p class="title tc">已有阅读器数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body">
            <p class="btns">
                <el-button round @click="batchDel">批量删除</el-button>
                <el-button round>批量导出</el-button>
            </p>
            <el-table
                :data="areaData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :max-height="tableH">
                <el-table-column
                    type="selection">
                </el-table-column>
                <el-table-column
                    class-name="red"
                    prop="areaName"
                    label="区域名称">
                </el-table-column>
                <el-table-column
                    sortable
                    class-name="orange"
                    prop="needReaderNum"
                    label="所需阅读器数量">
                </el-table-column>
                <el-table-column
                    prop="readerId"
                    label="阅读器编号">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.readerId.length === 0"
                            @click.native.prevent="placeReader(scope.row)"
                            size="small">
                            布置阅读器
                        </el-button>
                        <span v-else>{{ scope.row.readerId.join(",") }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    prop="hadReaderNum"
                    label="已布置阅读器数量">
                </el-table-column>
                <el-table-column
                    label="查看资产">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.assetsNum > 0"
                            @click.native.prevent="checkAsset(scope.row)"
                            size="small">
                            查看资产
                        </el-button>
                        <el-button
                            v-else
                            @click.native.prevent="addAsset(scope.row)"
                            size="small">
                            添加资产
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    prop="assetsNum"
                    label="固定资产数量">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改日期">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            @click.native.prevent="update(scope.row)"
                            size="small">
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :page-size="pagSize"
                :total="pagTotal">
            </el-pagination>
            <p class="pagination">
                每页显示
                <select @change="pageSizeChange" v-model="pageSize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                条
            </p>
        </div>
        <!--布置阅读器-->
        <el-dialog
            title="布置阅读器"
            :visible.sync="placeReaderVisible"
            width="30%">
            <p style="margin-bottom: 0.2rem">您正在布置一楼会议室的阅读器，请录入最多3个阅读器编号</p>
            <div>
                <textarea class="reader-place"
                          placeholder="请录入新增的阅读器编号，录入已布置的阅读器将会布置失败"
                          v-model="readerId"></textarea>
            </div>
            <span slot="footer">
                <el-button type="primary" @click="placeReaderConfirm">布 置</el-button>
            </span>
        </el-dialog>
        <!--查看资产-->
        <el-dialog
            title="查看资产"
            :visible.sync="checkAssetVisible"
            width="30%">
            <p slot="title" class="small-title">
                <strong>查看资产</strong>
                藏经阁共有3个定海神针
            </p>
            <el-table :data="assetData" max-height="400">
                <el-table-column property="name" label="固定资产名称" class-name="red"></el-table-column>
                <el-table-column property="id" label="固定资产编号"></el-table-column>
                <el-table-column property="tagId" label="绑定电子标签"></el-table-column>
            </el-table>
            <span slot="footer">
                <el-button type="primary" @click="checkAssetVisible = false">导 出</el-button>
            </span>
        </el-dialog>
        <!--添加资产-->
        <el-dialog
            :visible.sync="addAssetVisible"
            width="30%">
            <p slot="title" class="small-title">
                <strong>添加资产</strong>
                您正在{{ currentRow.areaName }}内添加资产
            </p>
            <div class="content">
                <ul>
                    <li>
                        <label>
                            <span class="required-sign">*</span>
                            <input type="text" placeholder="请输入固定资产名称" v-model="currentAddData.assetsName">
                        </label>
                    </li>
                    <li>
                        <label>
                            <span class="required-sign">*</span>
                            <input type="text" placeholder="请输入固定资产编号" v-model="currentAddData.id">
                        </label>
                    </li>
                    <li>
                        <label>
                            <span class="required-sign">*</span>
                            <input type="text" placeholder="请输入责任人" v-model="currentAddData.personLiable">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="备注信息" v-model="currentAddData.remark">
                        </label>
                    </li>
                </ul>
                <el-tag
                    v-for="tag in tags"
                    :key="tag.id"
                    closable
                    @close="handleClose(tag)">
                    {{tag.assetsName}}
                </el-tag>
            </div>
            <span slot="footer">
                <el-button type="danger" class="continue-add" @click="continueAdd">继续添加</el-button>
            </span>
            <span slot="footer">
                <el-button type="primary" @click="addAssetsConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!--修改组件-->
        <el-dialog
            title="修改信息"
            :visible.sync="updateVisible"
            width="30%">
            <div class="content">
                <ul>
                    <li>
                        <label>
                            <input type="text" placeholder="区域名称" v-model="currentRow.areaName">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="阅读器数量" v-model="currentRow.needReaderNum">
                        </label>
                    </li>
                </ul>
            </div>
            <span slot="footer">
                <el-button type="primary" @click="updateConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "checkArea",
        components: {
            pCircle
        },
        data() {
            return {
                areaData: [],
                assetData: [],
                // 分页组件total
                pagTotal: 1,
                pageSize: 10, // 每页显示的值
                pagSize: 10, // 传入分页组件每页显示的值
                searchParam: '',
                multipleSelection: [],
                currentRow: {}, // 当前点击的行数据
                updateVisible: false,
                checkAssetVisible: false,
                placeReaderVisible: false,
                addAssetVisible: false,
                addAssetsData: [],// 添加资产弹窗里面的数据
                currentAddData: {}, // 当前添加输入数据
                readerId: '', // 布置阅读器里面的参数
                tags: [],
                // 区域总量进度条参数
                areaPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 已布置区域进度条参数
                placePro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 所需阅读器数量进度条参数
                needReaderPro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                // 已有阅读器数量进度条参数
                ownReaderPro: {
                    all: 0,
                    show: 0,
                    color: '#CB65FF'
                },
                tableH: '500',
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 批量删除行
            batchDel() {
                let ids = []
                this.multipleSelection.forEach((item, val) => {
                    ids.push(item.id)
                })
                if (ids.length === 0) {
                    this.$message.error(this.$msgDictionary.chooseFirst)
                    return
                }
                this.$alert('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    closeOnClickModal: true,
                    confirmButtonClass: 'dialog-big-button',
                }).then(() => {
                    this.$ajax
                        .areas
                        .deleteAreas(ids)
                        .then((res) => {
                            let result = res.data
                            if (result.code === 200) {
                                this.$message.success(this.$msgDictionary.delete.suc)
                                ids.forEach((item, val) => {
                                    this.tableData.splice(item, 1)
                                })
                            } else {
                                this.$message.error(result.msg)
                            }
                        }, () => {
                            this.$message.error(this.$msgDictionary.serviceException)
                        })
                }).catch(() => {

                })
            },
            // 修改
            update(val) {
                this.currentRow = val
                this.updateVisible = true
            },
            // 修改确定
            updateConfirm() {
                let params = {
                    id: this.currentRow.areaId,
                    userId: "",
                    areaName: this.currentRow.areaName,
                    needReaderNum: this.currentRow.needReaderNum,
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .areas
                    .updateAreas(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.updateVisible = false
                            this.$message.success(this.$msgDictionary.update.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 表格中的添加资产
             * @param val
             */
            addAsset(val) {
                this.currentRow = val
                this.addAssetVisible = true
            },
            // 添加资产确定
            addAssetsConfirm() {
                if (this.addAssetsData.length === 0 && !this.addFormat()) {
                    return
                }
                if (!(this.currentAddData.assetsName === undefined
                    || this.currentAddData.assetsName.trim() === ""
                    || this.currentAddData.id === undefined
                    || this.currentAddData.id.trim() === ""
                    || this.currentAddData.personLiable === undefined
                    || this.currentAddData.personLiable.trim() === "")) {
                    this.addAssetsData.push(this.currentAddData)
                }
                let params = this.addAssetsData
                if (localStorage.getItem("user")) {
                    params.map((item) => {
                        item.userId = JSON.parse(localStorage.getItem("user")).userId
                        item.areaId = this.currentRow.areaId
                    })
                }
                this.$ajax
                    .assets
                    .jsonCheck(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result.addAssetsFailList.length === 0) {
                                this.$message.success(this.$msgDictionary.add.suc)
                                this.addAssetVisible = false
                                this.getIndex()
                            } else {
                                this.$message.error("资产 " + result.result.addAssetsFailList[0].assetsName + " "
                                    + result.result.addAssetsFailList[0].result)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            // 继续添加
            continueAdd() {
                if (this.addFormat()) {
                    this.addAssetsData.push(this.currentAddData)
                    this.tags.push(this.currentAddData)
                    this.currentAddData = {}
                }
            },
            // 添加资产必填判断
            addFormat() {
                if (this.currentAddData.assetsName === undefined
                    || this.currentAddData.assetsName.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.assets.emptyName)
                    return false
                }
                if (this.currentAddData.id === undefined
                    || this.currentAddData.id.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.assets.emptyId)
                    return false
                }
                if (isNaN(this.currentAddData.id * 1)) {
                    this.$message.error(this.$msgDictionary.add.assets.isNaN)
                    return false
                }
                if (this.currentAddData.personLiable === undefined
                    || this.currentAddData.personLiable.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.assets.emptyPersonLiable)
                    return false
                }
                return true
            },
            /**
             * 表格中的查看资产
             * @param val
             */
            checkAsset(val) {
                // 根据区域id查询资产
                let params = {
                    areaId: val.areaId,
                    userId:''
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .getAssetsByAreaId(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.checkAssetVisible = true
                            this.assetData = result.result.content
                            console.log(result.result)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 表格中的布置阅读器
             * @param val
             */
            placeReader(val) {
                this.currentRow = val
                this.placeReaderVisible = true
            },
            placeReaderConfirm() {
                if (this.readerId.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.emptyReaders)
                    return
                }
                let params = {
                    userID: "",
                    areaIdAndReadersId: null
                }
                if (localStorage.getItem("user")) {
                    params.userID = JSON.parse(localStorage.getItem("user")).userId
                }
                let arr = [...new Set(this.readerId.split(','))]
                for(let i = 0; i < arr.length; i++){
                    if(isNaN(arr[i])){
                        this.$message.error(this.$msgDictionary.add.readers.isNaN)
                        return false
                    }
                }
                let obj = {}
                obj[this.currentRow.areaId] = arr
                params.areaIdAndReadersId = obj
                this.$ajax
                    .readers
                    .bandArea(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.operation.suc)
                            this.placeReaderVisible = false
                            this.getIndex()
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 标签关闭事件
             * @param tag
             */
            handleClose(tag) {
                this.tags.forEach((item, val) => {
                    if (item.assetsName === tag.assetsName) {
                        this.tags.splice(val, 1)
                        this.addAssetsData.splice(val, 1)
                    }
                })
            },
            /**
             * 搜索
             */
            search() {
                if (this.searchParam.trim() === '') {
                    this.getIndex()
                    this.$message.error(this.$msgDictionary.query.emptyInput)
                    return
                }
                let params = {
                    areaName: this.searchParam.trim(),
                    userId: "",
                    pageIndex: 1,
                    pageSize: 10
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .areas
                    .getAreasByName(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.areaData = result.result.content
                            if (this.areaData.length === 0) {
                                this.$message.error(this.$msgDictionary.query.emptyResult)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            // 每页显示更改
            pageSizeChange() {
                this.pagSize = this.pageSize * 1
                this.getIndex(this.pageSize * 1, 1)
            },
            // 分页更改
            currentChange(index) {
                this.getIndex(this.pageSize * 1, index)
            },
            getIndex(pageSize, pageNum) {
                let params = {
                    userId: "",
                    pageSize: pageSize ? pageSize * 1 : 10,
                    pageIndex: pageNum ? pageNum * 1 : 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .areas
                    .getAreas(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result) {
                                this.areaData = result.result.areasInfoDTOS.content
                                this.pagTotal = result.result.totalAreasNum
                                this.pagSize = params.pageSize * 1
                                this.areaPro.all = result.result.totalAreasNum
                                this.areaPro.show = result.result.totalAreasNum
                                this.placePro.all = result.result.totalAreasNum
                                this.placePro.show = result.result.bandReaderAreasNum
                                this.needReaderPro.all = result.result.totalNeedReaderNum
                                this.needReaderPro.show = result.result.totalNeedReaderNum
                                this.ownReaderPro.all = result.result.totalAssetNum1
                                this.ownReaderPro.show = result.result.alarmOpenNum1
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        },
        mounted() {
            let winH = window.screen.height
            this.tableH = winH * 0.44
            this.getIndex()
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/index-head";

    .checkArea {
        height: 100%;
        .index-head {
            .left {
                .title {
                    .icon {
                        background-position: -299px -298px;
                    }
                }
            }
        }
        .pagination {
            position: fixed;
            bottom: 0.5rem;
            left: 21%;
        }
    }

    .el-dialog {
        .reader-place {
            width: 100%;
            height: 2rem;
            resize: none;
            padding: 0.1rem;
            box-sizing: border-box;
        }
        .continue-add {
            margin: 0.2rem 0;
            border: 1px solid $strong_red;
            background: transparent;
            color: $strong_red;
        }
    }
</style>
